<template>
    <div>
        <div class="table-data" v-show="tabShow">
        <div class="search-box">
            <el-button size="small" type="primary" @click="handleAddAndModify(0)"><i class="el-icon-plus"></i><span>新建权限模块</span></el-button>
        </div>
        <el-table 
        v-loading="loading"
        element-loading-text="正在加载"
        element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass"  style="width:100%" :height="tHeight" class="table-box">
            <el-table-column label="id" prop="id" width="100"></el-table-column>
            <el-table-column label="模块名称"  prop="module"></el-table-column>
            <el-table-column label="模块别名" prop="module_alias"></el-table-column>
            <el-table-column label="创建时间" prop="create_time"></el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <!-- <router-link  :to="{name:'systemEdit',query:{id:scope.row.id}}" @click.native="handleEdit(scope.$index,scope.row)" class="user-detail el-button el-button--primary el-button--mini">修改</router-link> -->
                <!-- <el-switch v-model="state" @change="handleState(row)" active-text="启用" inactive-text="禁用"></el-switch> -->
                <el-button size="mini" type="primary" @click="handleAddAndModify(1,scope.row)">修改</el-button>
            </template>
            </el-table-column>
        </el-table>
        </div>
        <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
        <div class="modify" v-if="modifyShow">
            <div class="modify-box">
                <div class="modify-text">{{str}}</div>
                <el-form :label-position="right" label-width="80px" :model="formLabelAlign">
                    <el-form-item label="模块id" v-if="modifyIdShow">
                        <el-input v-model="formLabelAlign.id" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="模块名称">
                        <el-input v-model="formLabelAlign.module"></el-input>
                    </el-form-item>
                    <el-form-item label="模块别名">
                        <el-input v-model="formLabelAlign.module_alias"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: center;">
                    <el-button size="mini" type="primary" @click="modifyShow=false">取消</el-button>
                    <el-button size="mini" type="primary" @click="determine">确定</el-button>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import systemApi from "@/api/system";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: { }
})
export default class TableData extends Vue {
  // @Getter("user") getUser: any;
    formLabelAlign:any = {
        id: '',
        module: '',
        module_alias: ''
    }
    str:string = ''
    modifyShow:boolean = false
    modifyIdShow:boolean = true
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() state: Boolean = true; // 状态
  @Prop({}) tabVisible!: any;
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/authorityModule'){
      this.tabShow=this.tabVisible;
    }
  }

  
  created() {
    this.loadData();
    if(this.$route.path!='/authorityModule'){
      this.tabShow=false
    }
  }
    headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  loadData() {
    systemApi.permissionmodulelist()
      .then((res: any) => {
          console.log(res.data.data)
        this.tableData=res.data.data
        this.loading=false
    });
  }
  handleAddAndModify(id:any,msg) {
      console.log(id,msg)
        if(id==1) {
            this.str = '修改权限模块'
            this.formLabelAlign ={
                id: msg.id,
                module: msg.module,
                module_alias: msg.module_alias
            }
            this.modifyIdShow = true
        }else {
            this.str = '新增权限模块'
            this.formLabelAlign = {}
            this.modifyIdShow = false
        }
        this.modifyShow = true
  }
  determine() {
      console.log(this.formLabelAlign)
    systemApi.authoritymodulemodification(this.formLabelAlign)
    .then((res:any)=>{
        if(res.data.status){
            this.$message({
            message: '操作成功',
            type: "success"
            });
            this.$emit("closeDialog");
            this.$emit("loadData")
        }else{
            this.$message({
            message: res.data.msg,
            type: "error"
            });
        }
    })
  }
}
</script>

<style lang="scss">
.el-date-editor{
  margin-right: 10px;
}
.modify {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    >.modify-box {
        width: 400px;
        height: 400px;
        padding: 20px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -220px;
        margin-top: -220px;
        .modify-text {
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            line-height: 60px;
        }
    }
}
</style>
